<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>layout</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet"  href="../js/easyui/themes/default/easyui.css"/>
		<link rel="stylesheet"  href="../js/easyui/themes/icon.css"/>
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
		<link rel="stylesheet"  href="../js/ztree/zTreeStyle.css"/>
		
		<script type="text/javascript">
			
			$(function () {
				//1进行ztree菜单设置
				var setting ={
					data:{
						simpleData:{
							enable:true
						}
					},
					callback:{
						onClick:function (event,treeId,treeNode,clickFlag) {
							
							var content = '<div style="width:100%;height:100%;overflow:hidden;">'
								+ '<iframe src="'
								+ treeNode.page
								+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
							//没有page树形菜单 不打开选项卡
							if(treeNode.page!=undefined&&treeNode.page!=""){
								
								if($("#mytabs").tabs('exists',treeNode.name)){
									//已选中选项卡
									$("#mytabs").tabs('select',treeNode.name);
								}else{
									//没有选择选项卡则添加选项卡
									$("#mytabs").tabs('add',{
										title:treeNode.name,
										content:content,
										closable:true
									});
								}
								
							}																			
						}
					}
				};
				
				//2提供ztree树形菜单数据
				var zNodes=[
					{id:1,pId:0,name:"日韩"},
					{id:2,pId:0,name:"欧美"},
					{id:11,pId:1,name:"日本高清区"},
					{id:12,pId:1,name:"韩国高清区"},
					{id:13,pId:2,name:"欧洲高清区",page:"http://www.baidu.com"},
					{id:14,pId:2,name:"美国高清区",page:"http://www.kugou.com"}			
				];
				
				//3生成菜单
				$.fn.zTree.init($("#baseMenu"),setting,zNodes);
				
				//对选项卡注册右键事件
				$("#mytabs").tabs({
				onContextMenu:function(e,title,index){
					//阻止默认菜单显示
					e.preventDefault();
					//显示自定义右键菜单
					$("#mm").menu('show',{
						left:e.pageX,
						top:e.pageY
					});
				}
			});				
		    });									
		</script>
	</head>
	
	<body class="easyui-layout">
		<div data-options="region:'north',title:'北部区'" style="height: 100px;">
			<a href="#" class="easyui-menubutton" data-options="iconCls:'icon-save',menu:'#mu'">系统菜单 </a>
			<div id="mu" style="width: 120px;">
				<div>菜单一</div>
				<div>菜单二</div>
				<div>菜单三</div>
				<div class="menu-sep"></div>
				<div>菜单四</div>			
			</div>
			
		</div>
		<div data-options="region:'west',title:'菜单导航'" style="width: 180px;">
			<!--折叠面板-->
			<div  class="easyui-accordion" data-options="fit:true">
				<div data-options="title:'基础菜单'">
					<ul id="baseMenu" class="ztree"></ul>
				</div>
				<div data-options="title:'系统菜单'">系统菜单</div>
			</div>
		</div>
		<div data-options="region:'center'">
			<!--选项卡面板-->
			<div id="mytabs" class="easyui-tabs" data-options="fit:true"></div>
		</div>
		<div data-options="region:'east',title:'东部区'" style="width: 80px;">东部区</div>
		<div data-options="region:'south',title:'南部区'" style="height: 80px;">南部区</div>
		
		<!--菜单初始化都是隐藏的-->
		<div id="mm" class="easyui-menu" style="width: 120px;">
			<div>关闭当前窗口</div>
			<div>关闭其他窗口</div>
			<div class="menu-sep"></div>
			<div data-options="iconCls:'icon-cancel'">关闭全部窗口</div>	
		</div>
	</body>
</html>
